requests flow

3 files changed, 53 insertions, 26 deletions

diff --git a/src/routes/(app)/[username]/request/+page.server.js b/src/routes/(app)/[username]/request/+page.server.js
index f32c118c..15b06962 100644
--- a/src/routes/(app)/[username]/request/+page.server.js
+++ b/src/routes/(app)/[username]/request/+page.server.js
@@ -6,9 +6,9 @@ export let load = ({ locals }) => {
 };
 
 export const actions = {
-	default: async ({ cookies, request, url }) => {
+	default: async ({ cookies, locals, request, url }) => {
 		let form = Object.fromEntries(await request.formData());
-		await post('/requests', form, auth(cookies));
-		throw redirect(307, url.href + '/sent');
+		let { id } = await post('/requests', form, auth(cookies));
+		throw redirect(307, `/${locals.user.username}/request/${id}`);
 	}
 };
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 79db5d42..99f2e8e2 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -1,3 +1,19 @@
 import { auth, get } from '$lib/utils';
+import { redirect } from '@sveltejs/kit';
 
-export let load = async ({ cookies, params }) => get(`/request/${params.id}`, auth(cookies));
+export let load = async ({ cookies, depends, locals: { user }, params }) => {
+	depends('app:invoice');
+	if (!user) throw redirect(307, '/login');
+
+	let { request } = await get(`/request/${params.id}`, auth(cookies));
+	let { invoice } = request;
+	if (invoice) {
+		let { amount, received, uuid } = invoice;
+		if ((received && !amount) || received >= amount) throw redirect(307, `/send/${uuid}`);
+
+		if (request.requester.username === user.username)
+			throw redirect(307, `/send/${request.invoice.uuid}`);
+	}
+
+	return { request };
+};
diff --git a/src/routes/(app)/[username]/request/[id]/+page.svelte b/src/routes/(app)/[username]/request/[id]/+page.svelte
index 74b037d3..0f979284 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/request/[id]/+page.svelte
@@ -1,35 +1,46 @@
 <script>
-	import { scale } from 'svelte/transition';
-	import { Avatar, Icon } from '$comp';
+	import { Avatar } from '$comp';
 	import { f, sat, sats } from '$lib/utils';
 	import { request as req, requestRedirect } from '$lib/store';
+	import { onMount } from 'svelte';
 
 	export let data;
 	let { request, user } = data;
-	let { amount, rate, currency } = request.invoice;
-	let fiat = (amount * rate) / sats;
-	req.set();
+
+	let amount, currency, rate, fiat;
+	if (request.invoice) {
+		({ amount, rate, currency } = request.invoice);
+		fiat = (amount * rate) / sats;
+	}
+
+	onMount(() => req.set());
 </script>
 
 <div class="container px-4 mt-20 max-w-xl mx-auto space-y-8">
-	<div class="flex w-full max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-		<Icon icon="check" style="mx-auto" />
-	</div>
-
 	<div class="text-center mb-8 space-y-5">
-		<p class="text-5xl break-words">
-			<span class="text-xl md:text-2xl">Sent invoice to</span>
-		</p>
-		<div class="flex p-1 gap-2 justify-center">
-			<Avatar user={request.requester} size={20} />
-			<p class="text-4xl break-words my-auto">{request.requester.username}</p>
-		</div>
-		<div>
-			<h2 class="text-2xl md:text-3xl font-semibold">
-				{f(fiat, currency)}
-			</h2>
-			<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
-		</div>
+		{#if request.recipient_id === user.id}
+			<p class="text-5xl break-words">
+				<span class="text-xl md:text-2xl">Sent invoice to</span>
+			</p>
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={request.requester} size={20} />
+				<p class="text-4xl break-words my-auto">{request.requester.username}</p>
+			</div>
+			<div>
+				<h2 class="text-2xl md:text-3xl font-semibold">
+					{f(fiat, currency)}
+				</h2>
+				<h3 class="text-secondary md:text-lg mb-6 mt-1">{sat(amount)}</h3>
+			</div>
+		{:else}
+			<p class="text-5xl break-words">
+				<span class="text-xl md:text-2xl">Sent request to</span>
+			</p>
+			<div class="flex p-1 gap-2 justify-center">
+				<Avatar user={request.recipient} size={20} />
+				<p class="text-4xl break-words my-auto">{request.recipient.username}</p>
+			</div>
+		{/if}
 	</div>
 </div>